import React, { Component } from "react";
import "./upgradeService.scss";
import { ActionSheet } from "antd-mobile";
import { agreements_url } from "@config/Config";
import XFButton from "@component/button/index";
import AngleTip from "@component/AngleTip";

import footer from "@/images/imageXHF/xhf_foot.png";
import failImg from "@/images/fail-loan-repay.png";

const isIPhone = new RegExp("\\biPhone\\b|\\biPod\\b", "i").test(
	window.navigator.userAgent
);
let wrapProps;
if (isIPhone) {
	wrapProps = {
		onTouchStart: e => e.preventDefault()
	};
}

class UpgradeService extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	submit = () => {
		this.props.onSubmit();
	};
	onClockAgree = () => {
		let BUTTONS = [
			"《非在校学生身份承诺函》",
			"《个人信息使用授权书》",
			"《永辉金融隐私政策》",
			"《永辉金融用户协议》",
			"取消"
		];
		let PATHS = [
			// type: 0: 内部链接 1: iframe
			{
				url: "/nonStudentCommitmentLetter",
				type: 0
			},

			{
				url: "/personalInformationLicense",
				type: 0
			},
			{
				url: "/privacyAgreement.html",
				type: 1
			},
			{
				url: "/serviceAgreementAuthorization",
				type: 0
			}
		];
		const { extendState } = this.props;
		if (extendState == 1) {
			BUTTONS.splice(1, 0, "《个人循环授信借款合同》");
			PATHS.splice(1, 0, {
				url: "/xhfCreditPaymentContract.html",
				type: 1
			});
		}
		ActionSheet.showActionSheetWithOptions(
			{
				options: BUTTONS,
				cancelButtonIndex: BUTTONS.length - 1,
				maskClosable: true,
				"data-seed": "logId",
				wrapProps
			},
			buttonIndex => {
				let urlInfo = PATHS[buttonIndex];
				if (urlInfo && urlInfo.type == 0) {
					this.props.history.push(urlInfo.url);
				} else if (urlInfo && urlInfo.type == 1) {
					this.props.history.push({
						pathname: "/iframeAgreements",
						state: {
							src: agreements_url + urlInfo.url,
							title: BUTTONS[buttonIndex]
						}
					});
				}
			}
		);
	};
	render() {
		const { extendState, cornerContent } = this.props;
		return (
			<div className="upgrade_service">
				<img className="fail_img" src={failImg} alt="" />
				<h2>暂时不能为您提供借款服务</h2>
				<h3>
					您需要重新签约升级，我们将对您进行综合评估，最终结果以页面展示为准。
				</h3>
				<div className="btn-content">
					<div className="agreement" onClick={this.onClockAgree}>
						点击按钮，表示您已阅读并同意<i>《相关协议》</i>
					</div>
					<XFButton onClick={this.submit} className="button">
						同意并升级服务
					</XFButton>
					{extendState == 1 && <AngleTip cornerContent={cornerContent} />}
				</div>
				<div className="footer-box">
					<img className="footer" src={footer} alt="" />
				</div>
			</div>
		);
	}
}

export default UpgradeService;
